<template>
	<view class="side-navigate">
		<view class="left-box" :style="{ width: leftBoxWidth }">
			<scroll-view :scroll-y="scrollAble" :style="{ height: scrollBoxHeight }" :scroll-into-view="menuScrollView">
				<view v-for="(item, index) in menuList" :key="index" :class="[
            'menu-item',
            activeMenu === item.key ? 'active-menu' : '',
            index === activeMenuIndex + 1 ? 'top-right-radio' : '',
            index === activeMenuIndex - 1 ? 'bottom-right-radio' : ''
          ]" :id="item.key" @click="clickMenuItem(item, index)">
					<view class="left-line" v-if="activeMenu === item.key"></view>
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<view class="right-box" :style="{ width: rightBoxWidth }">
			<scroll-view class="content-scroll-view" :scroll-y="scrollAble" :scroll-into-view="contentScrollView"
				:style="{ height: scrollBoxHeight }" @scroll="contentScroll">
				<view v-for="(item, index) in contentList" :key="index" :id="item.typeKey" class="content-item">
					<view class="content-title">{{ item.title }}</view>
					<view class="item-list">
						<view class="item" v-for="(iItem, iIndex) in item.subchildren" :key="iIndex"
							@click="clickItem(iItem)">
							<view class="item-img">
								<image class="img" :src="iItem.img" mode="aspectFill" />
							</view>
							<view class="item-name">{{ iItem.name }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	export default {
		name: 'YouSideNavigate',
		data() {
			return {
				baseUrl,
				baseImgUrl,
				baseIconUrl,
				menuList: [],
				contentList: [],
				activeMenu: 0,
				activeMenuIndex: 0,
				menuScrollView: '',
				contentScrollView: '',
				contentScrollTop: '',
				scrollAble: false
			}
		},
		props: {
			innerScrollable: {
				type: Boolean,
				default: false
			},
			storeId: {
				type: [String, Number],
				default: ''
			},
			leftBoxWidth: {
				type: [String, Number],
				default: '180rpx'
			},
			rightBoxWidth: {
				type: [String, Number],
				default: '550rpx'
			},
			scrollBoxHeight: {
				type: [String, Number],
				default: ''
			},
			leftMenuList: {
				type: Array,
				default: []
			},
			rightContentList: {
				type: Array,
				default: []
			}
		},
		watch: {
			leftMenuList: {
				handler(newVal, oldVal) {
					this.menuList = uni.$u.deepClone(newVal)
				},
				deep: true
			},
			rightContentList: {
				handler(newVal, oldVal) {
					this.contentList = uni.$u.deepClone(newVal)
				},
				deep: true
			},
			innerScrollable: {
				handler(newVal, oldVal) {
					this.scrollAble = uni.$u.deepClone(newVal)
				},
				deep: true
			}
		},
		created() {
			this.menuList = uni.$u.deepClone(this.leftMenuList)
			this.contentList = uni.$u.deepClone(this.rightContentList)
			this.scrollAble = uni.$u.deepClone(this.innerScrollable)
		},
		methods: {
			clickMenuItem(item, index) {
				const data = {
					item: item,
					index: index
				}
				this.activeMenu = item.key
				this.activeMenuIndex = index
				this.contentScrollView = item.key
				this.$emit('clickMenuItem', data)
			},
			//跳转至分类商品列表页
			clickItem(iItem) {
				console.log(iItem)
				// uni.navigateTo({
				// 	url: `/subPages/store/goodsDetail?id=${iItem.id}&storeId=${this.storeId}`
				// })
				uni.navigateTo({
					url: `/subPages/store/categoryShoppingCar?id=${iItem.id}&storeId=${this.storeId}`
				})
			},
			contentScroll($event) {
				$event.stopPropagation()
				this.contentScrollTop = $event.detail.scrollTop
				// this.getDistance()
			},
			getDistance() {
				let that = this
				// 获取子盒子相对于父盒子顶部的距离
				this.$nextTick(() => {
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this)
						query.selectAll('.content-item').boundingClientRect(data => {
							data.forEach((item, index) => {
								if (item.top <= 330 && item.top > 280) {
									that.activeMenu = item.id
									that.activeMenuIndex = index
									this.menuScrollView = index < 5 ? data[0].id : data[
										index - 4].id
								}
							})
						}).exec()
					}, 200)
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.side-navigate {
		display: flex;
		justify-content: space-between;
	}

	.left-box {
		border-radius: 0 12rpx 12rpx 0;
		overflow: hidden;

		.menu-item {
			padding: 30rpx 0;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			color: #808080;
			background-color: #FFF;
		}

		.active-menu {
			position: relative;
			color: #0b3f35;
			background-color: transparent;

			.left-line {
				position: absolute;
				left: 0;
				top: 50%;
				width: 6rpx;
				height: 24rpx;
				border-radius: 0 4rpx 4rpx 0;
				background-color: #0b3f35;
				transform: translateY(-50%);
			}
		}
	}

	.right-box {
		.content-item {
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 12rpx;
			background-color: #FFF;

			.content-title {
				margin-bottom: 10rpx;
				font-size: 28rpx;
				font-weight: 500;
			}

			.item-list {
				display: flex;
				flex-wrap: wrap;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 33.33%;
					margin-bottom: 20rpx;

					.item-img {
						width: 140rpx;
						height: 140rpx;

						.img {
							width: 100%;
							height: 100%;
						}
					}

					.item-name {
						margin-top: 4rpx;
						color: #333;
					}
				}
			}
		}
	}

	.top-right-radio {
		border-radius: 0 12rpx 0 0;
	}

	.bottom-right-radio {
		border-radius: 0 0 12rpx 0;
	}
</style>